<template>
    <FormDrawer ref="drawerBannerRef" title="设置轮播图" destroy-on-close @submit="onBannerSubmit">
      <el-form ref="formBannerRef" label-width="0">
        <el-form-item prop="title">
          <ImageSelector v-model="formBanner.urls"/>
        </el-form-item>
      </el-form>
    </FormDrawer>
</template>
<script setup>
import { ref, reactive} from 'vue'
import {
  addBannersById
} from '../../api/goods'
import FormDrawer from '../../components/FormDrawer.vue'
import { openFullScreenLoading, closeFullScreenLoading, toast, toAbsoluteUrl } from '../../composables/util'
import ImageSelector from '../../components/ImageSelector.vue'

// 定义事件
const emit = defineEmits(["submit"])
const submit = (e) => {
    emit('submit', e)
}

const drawerBannerRef = ref(null)
const formBanner = reactive({
  id:null,
  urls:[],
  ids:[]
})

const onBannerSubmit = () => {
  openFullScreenLoading()
  addBannersById(formBanner.id, formBanner.urls).then(res=>{
        toast("设置录播图成功")
        emit('submit', {goods_id: formBanner.id, banners:formBanner.urls})
    }).finally(()=>{
        closeFullScreenLoading()
        drawerBannerRef.value.close()
    })
}

// 打开抽屉
const open = (id, banners) => {
  let urls = []
  let ids = []
  banners.forEach(item=>{
    urls.push(item.url)
    ids.push(item.id)
  })
  formBanner.id = id
  formBanner.urls = urls
  formBanner.ids = ids
  drawerBannerRef.value.open()
}
// 关闭抽屉
const close = () => drawerBannerRef.value.close()

defineExpose({open, close})

</script>